{% extends 'mine/layout.html.twig' %}
{% block title %}管理员后台 - 航大云课{% endblock %}
{% block stylesheets %}
    {{ encore_entry_link_tags('back') }}
    <style>
        #list3, #list2, #list1, #list4 {
            color: #6f6f6f;
            font-size: 21px;
        }

        #list5 {
            color: #0c0c0c;
            font-size: 21px;
        }

        #admin_nav {
            clear: both;
            height: 45px;
            background: white;
            border-radius: 25px;
            width: 100%;
            margin: 10px 6px;
            box-shadow: 1px 1px 11px 0px #8f8f8f1f;
        }

        .admin_nav_one {
            float: left;
            width: 33.333333%;
            height: 100%;
            padding: 7px 12%;
            font-size: 20px;
            border: solid 2px #ececec;
        }

        #admin_data {
            border-radius: 25px 0 0 25px;
            background-color: #03A9F4;
            color: white;
        }

        #admin_course {
            border-left: 0;
            border-right: 0;
        }

        #admin_user {

            border-radius: 0 25px 25px 0;
        }

        #main {
            margin-top: 71px;
            margin-left: 53px;
            margin-bottom: 40px;
        }

        #situation {
            clear: both;
            height: 69px;
            margin: 40px 0 27px 46px;

        }

        .block {
            float: left;
            border: solid 3px #bdf3b9;
            margin: 0 5px 0 5px;
            height: 108px;
            width: 206px;
            background-color: #ebffede3;
        }

        .active {
            text-align: center;
            font-size: 15px;
            margin: 5px 0 5px 10px;
            color: #4e4e4e;
        }

        .zjm {

            font-size: 21px;
            margin: 10px 0 12px 10px;
            color: #393939;

        }

        .jd {
            font-size: 15px;
            margin: 5px 0 5px 10px;
            color: #565656;
        }

        table {
            border: solid 1px #dedede;
            font-size: 14px;
            width: 95%;
            margin-left: 27px;
            margin-top: 22px;
            border-collapse: collapse;
            background-color: white;
        }

        th {
            color: #73777A;
            padding: 13px 20px;
            background: #f2f3ff;
            border: 1px solid #CDE4FF !important;
            font-weight: 400;
            text-align: center;
        }

        td {
            color: #2e2e2e;
            padding: 13px 2px;
            border: 1px solid #CDE4FF !important;
            font-weight: 400;
            text-align: center;
            line-height: 23px;
        }

        tr:nth-child(even) {
            background-color: #f2f3ff4a;
        }

        tr:hover {
            background-color: #edeefc;
        }

    </style>
{% endblock %}
{% block content %}
    <div id="added_title">
        <h1>管理员后台</h1>
    </div>


    <div id="admin_nav">
        <div id="admin_data" class="admin_nav_one">数据分析</div>
        <div id="admin_course" class="admin_nav_one">课程管理</div>
        <div id="admin_user" class="admin_nav_one">用户管理</div>
    </div>
    {#数据分析#}
    <div id="data_analysis">
        <div id="situation">
            <div id="block1" class="block">
                <div class="jd">节点一</div>
                <div class="zjm"></div>
                <div class="active">loading</div>
            </div>
            <div id="block2" class="block">
                <div class="jd">节点二</div>
                <div class="zjm"></div>
                <div class="active">loading</div>
            </div>
            <div id="block3" class="block">
                <div class="jd">节点三</div>
                <div class="zjm"></div>
                <div class="active">loading</div>
            </div>
            <div id="block4" class="block">
                <div class="jd">节点四</div>
                <div class="zjm"></div>
                <div class="active">loading</div>
            </div>
        </div>
        <div id="main" style="width: 800px;height:450px;">
        </div>
    </div>
    {#课程管理#}
    <div id="course_manage" style="display:none">
        <div id="categorys">
            {#<ul>#}
                {#<li onclick="selectTag(this);return false;" style="background-color: #4bb9ea;">全部</li>#}
                {#<li onclick="selectTag(this);return false;" style="background-color: #939c9c;">测试</li>#}

                {#<li onclick="newTag();return false;" style="background-color: #939c9c;"><img src="{{ asset('img/setcategory.svg') }}" style="height: 20px;"></li>#}
                {#<li onclick="newTag();return false;" style="background-color: #939c9c;"><img src="{{ asset('img/setcategory.svg') }}" style="height: 20px;"></li>#}
            {#</ul>#}
        </div>
        <table>
            <thead>
            <tr>
                <th>课程名</th>
                <th>任课老师</th>
                <th>课时</th>
                <th>选课情况</th>
                <th>创建时间</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody id="course_manage_content">
            <div id="course_manage_loading"><img src="{{ asset('img/gif/loading.gif') }}" alt=""/>正在加载数据,请稍候...</div>




            </tbody>
        </table>
    </div>
    {#用户管理#}
    <div id="user_manage" style="display:none">
        <table>
            <thead>
            <tr>
                <th>用户名</th>
                <th>身份</th>
                <th>手机号</th>
                <th>最后登录时间</th>
                <th>最后登录ip</th>
                <th>注册时间</th>
                <th>注册ip</th>
                <th>状态</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody id="user_manage_content">

            <div id="user_manage_loading"><img src="{{ asset('img/gif/loading.gif') }}" alt=""/>正在加载数据,请稍候...</div>


            </tbody>
        </table>
    </div>

{% endblock %}
{% block page_js %}
    <script src="/js/echarts.min.js"></script>
    <script type="text/javascript">
        //用户权限
        function userRole(id,now){
            modalFrame("修改用户权限","small",
                formSelect("userRole","身份",[{name:"学生"},{name:"老师"},{name:"管理员"}],now)+
                formButton("保存","submitRole("+id+")")
            )
        }
        function submitRole(id){
            var role=$("#userRole").find("option:selected").text();
            if(role=="老师"){
                role=2;
            }else
            if(role=="学生"){
                role=1;
            }else
            if(role=="管理员"){
                role=3;
            }
            $.ajax({                                 //AJAX
                type:"post",
                url:"{{ path('admineditUserRole',{'id':"999"}) }}".replace("999",id),                    //请求URL,对应后台Controller中的路由
                data:{"role":role},
                success:function(data){                    //后台返回响应结果时会自动执行该回调函数



                },
                error:function(data){
                    alert("服务器添加失败")
                },
                dataType:"json"
            })
        }


        //数据大小字符串处理
            function togb(size) {
            if (size.charAt(size.length - 2) == 'G') {
                var data = parseFloat(size);
                return data.toFixed(3);

            }
            else if (size.charAt(size.length - 2) == 'T') {
                var data = parseFloat(size) *1024;

                return data.toFixed(3);
            }
            else if (size.charAt(size.length - 2) == 'M') {
                var data = parseFloat(size) / 1024;

                return data.toFixed(3);
            }
            else if (size.charAt(size.length - 2) == 'K') {
                var data = parseFloat(size) / 1024 / 1024;
                return data.toFixed(3);
            }
            else {
                var data = parseFloat(size) / 1024 / 1024 / 1024;
                return data.toFixed(3);
            }
        }

        //生成图标


        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
        var option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                    type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            legend: {
                data: ['已用容量', '剩余容量']
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                type: 'value',
                axisLabel: {
                    formatter: '{value} '
                }
            },
            yAxis: {
                type: 'category',
                data: [],
                axisLabel: {
                    formatter: '{value}'
                }
            },
            series: [
                {
                    name: '已用容量',
                    type: 'bar',
                    stack: '总量',
                    label: {
                        normal: {
                            show: true,
                            position: 'right'
                        }

                    },
                    itemStyle: {
                        color: '#1f88d2'
                    },
                    data: []
                },
                {
                    name: '剩余容量',
                    type: 'bar',
                    stack: '总量',
                    label: {
                        normal: {
                            show: true,
                            position: 'insideRight'
                        }
                    },
                    itemStyle: {
                        color: '#d0cdce'
                    },
                    data: []
                }
            ]
        };


        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);


        //标签页
        var active_label = "#admin_data";
        $("#admin_course").on("click", function () {
            $(active_label).css({"background-color": "white", "color": "black"});
            $("#admin_course").css({"background-color": "#03A9F4", "color": "white"});

            $("#data_analysis").css("display", "none");
            $("#user_manage").css("display", "none");
            $("#course_manage").css("display", "block");
            active_label = "#admin_course";
            $.ajax({
                type: 'get',
                url: '{{ path('admincourseInfo') }}',
                beforeSend:function () {
                    $("#course_manage_content").empty();
                    $("#course_manage_loading").show();
                },
                success: function (data) {


                    for(var i=0;i<data.length;i++){
                        let course_herf='{{ path('oneCourseInfo',{'id':'courseId'}) }}'.replace('courseId',data[i].id);

                        $("#course_manage_content").append(' <tr class="totag-'+data[i].category_id+'">'+
                       '<td><a href="'+course_herf+'">'+data[i].name+'</a></td>'+
                            '<td>'+data[i].teacher_name+'</td>'+
                        '<td>'+data[i].course_hour+'</td>'+
                        '<td>'+data[i].sc_num+'/'+data[i].capacity+'</td>'+
                        '<td>'+data[i].created_at+'</td>'+
                        '<td><a onclick="'+data[i].id+','+data[i].name+','+'">修改</a></td>'+
                        '</tr>'
                           );
                    }

                },
                complete: function () {
                    $("#course_manage_loading").hide();
                }

            })
        })
        //获取课程分类栏
        function tagsList(){
            closeFrame();
            $("#categorys").empty();
            $.ajax({                                 //AJAX
                type:"get",
                url:"{{ path('categoryGet') }}",                      //请求URL,对应后台Controller中的路由

                success:function(data){                    //后台返回响应结果时会自动执行该回调函数

                    tags=[];
                    for(var i=0;i<data.length;i++){
                        tags[i]=data[i].name;
                    }
                    ids=[];
                    for(var i=0;i<data.length;i++){
                        ids[i]=data[i].id;
                    }
                    newTags(tags,ids,"categorys","{{ path('categoryAdd') }}","{{ path('categoryDelete') }}","tagsList()");

                },
                error:function(data){
                    alert("服务器添加失败")
                },
                dataType:"json"
            })
        }
        $("#admin_course").on("click", function () {
            tagsList();
        })
        $("#admin_user").on("click", function () {
            $(active_label).css({"background-color": "white", "color": "black"});
            $("#admin_user").css({"background-color": "#03A9F4", "color": "white"});

            $("#data_analysis").css("display", "none");
            $("#user_manage").css("display", "block");
            $("#course_manage").css("display", "none");
            active_label = "#admin_user";
            $.ajax({
                type: 'get',
                url: '{{ path('adminuserInfo') }}',
                beforeSend:function () {
                    $("#user_manage_content").empty();
                    $("#user_manage_loading").show();
                },
                success: function (data) {

                    for(var i=0;i<data.length;i++){
                    if(data[i].roles=="ROLE_TEACHER"){
                        data[i].roles="老师";
                    }else
                    if(data[i].roles==""){
                        data[i].roles="学生";
                    }else
                    if(data[i].roles=="ROLE_TEACHER,ROLE_ADMIN"){
                        data[i].roles="管理员";
                    }
                        $("#user_manage_content").append(
                            '            <tr>' +
                            '                <td>'+data[i].username+'</td>' +
                            '                <td>'+data[i].roles+'</td>\n' +
                            '                <td>'+data[i].mobile+'</td>\n' +
                            '                <td>'+data[i].createdAt.date+'</td>\n' +
                            '                <td>'+data[i].loginIP+'</td>\n' +
                            '                <td>'+data[i].lastLogin.date+'</td>\n' +
                            '                <td>'+data[i].registrayionIP+'</td>\n' +
                            '                <td>'+data[i].isActivated+'</td>\n' +
                            '                <td><a onclick=\"userRole('+data[i].id+',\''+data[i].roles+'\')">权限</a><br><a href="#">禁用</a></td>\n' +
                            '            </tr>\n' +
                            '           ')
                    }

                },
                complete: function () {
                    $("#user_manage_loading").hide();
                }

            })
        })

        $("#admin_data").on("click", function () {
            $(active_label).css({"background-color": "white", "color": "black"});
            $("#admin_data").css({"background-color": "#03A9F4", "color": "white"});

            $("#data_analysis").css("display", "block");
            $("#user_manage").css("display", "none");
            $("#course_manage").css("display", "none");

            active_label = "#admin_data";
        })
        //获取一次数据
        $.ajax({                                 //AJAX
            type: "get",
            url: "fs",                      //请求URL,对应后台Controller中的路由
            success: function (data) {                    //后台返回响应结果时会自动执行该回调函数

                fs = data;
                if (fs.fail) {
                    alert(fs.fail);
                    return 0;
                }


                for (var k in fs) {
                    fs[k].data_size = togb(fs[k].data_size);
                    fs[k].disk_quota = togb(fs[k].disk_quota);
                }


                var
                    option = {

                        yAxis: {
                            data: [fs[4].address, fs[3].address, fs[2].address, fs[1].address]

                        },
                        series: [
                            {
                                name: '已用容量',
                                data: [fs[1].data_size, fs[2].data_size, fs[3].data_size, fs[4].data_size]
                            },
                            {
                                name: '剩余容量',
                                data: [fs[1].disk_quota - fs[1].data_size, fs[2].disk_quota - fs[2].data_size, fs[3].disk_quota - fs[3].data_size, fs[4].disk_quota - fs[4].data_size]
                            }
                        ]
                    };


                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);

                $("#block1").children().eq(1).text(fs[1].address);
                $("#block2").children().eq(1).text(fs[2].address);
                $("#block3").children().eq(1).text(fs[3].address);
                $("#block4").children().eq(1).text(fs[4].address);

                for (var i = 1; i <= 4; i++) {
                    var blockid = "#block" + i;
                    if (fs[i].alive == "alive") {

                        $(blockid).children().eq(2).text("运行中");
                    }
                    else if (fs[i].alive == "dead") {
                        $(blockid).children().eq(2).text("已停止");
                        $(blockid).css({'background-color': '#f5e5e5e3', 'border': 'solid 3px #fa8e8e'});

                    }
                }


            },
            dataType: "json"
        })
        //数据分析动态更新
        // setInterval(function () {
        //     $.ajax({                                 //AJAX
        //         type: "get",
        //         url: "fs",                      //请求URL,对应后台Controller中的路由
        //         success: function (data) {                    //后台返回响应结果时会自动执行该回调函数
        //
        //             fs = data;
        //             if (fs.fail) {
        //                 alert(fs.fail);
        //                 return 0;
        //             }
        //
        //             for (var k in fs) {
        //                 fs[k].data_size = togb(fs[k].data_size);
        //                 fs[k].disk_quota = togb(fs[k].disk_quota);
        //             }
        //
        //             var
        //                 option = {
        //
        //                     yAxis: {
        //                         data: [fs[4].address, fs[3].address, fs[2].address, fs[1].address]
        //
        //                     },
        //                     series: [
        //                         {
        //                             name: '已用容量',
        //                             data: [fs[1].data_size, fs[2].data_size, fs[3].data_size, fs[4].data_size]
        //                         },
        //                         {
        //                             name: '剩余容量',
        //                             data: [fs[1].disk_quota - fs[1].data_size, fs[2].disk_quota - fs[2].data_size, fs[3].disk_quota - fs[3].data_size, fs[4].disk_quota - fs[4].data_size]
        //                         }
        //                     ]
        //                 };
        //
        //
        //             // 使用刚指定的配置项和数据显示图表。
        //             myChart.setOption(option);
        //
        //             $("#block1").children().eq(1).text(fs[1].address);
        //             $("#block2").children().eq(1).text(fs[2].address);
        //             $("#block3").children().eq(1).text(fs[3].address);
        //             $("#block4").children().eq(1).text(fs[4].address);
        //
        //             for (var i = 1; i <= 4; i++) {
        //                 var blockid = "#block" + i;
        //                 if (fs[i].alive == "alive") {
        //
        //                     $(blockid).children().eq(2).text("运行中");
        //                 }
        //                 else if (fs[i].alive == "dead") {
        //                     $(blockid).children().eq(2).text("已停止");
        //                     $(blockid).css({'background-color': '#f5e5e5e3', 'border': 'solid 3px #fa8e8e'});
        //
        //                 }
        //             }
        //
        //         },
        //         dataType: "json"
        //     })
        //
        // }, 2000)
    </script>

{% endblock %}